@@include('html/head.html', {
"title": "Главная"
})

<main>
    <div class="first">
        @@include('html/header.html', {})
        <div class="container">
            <div class="first_main">
                <div class="first__item">
                    <h1 class="h1" data-aos="fade-right">Explore, Buy and Sell the <span>Best NFTs!</span></h1>
                    <div class="first_btns" data-aos="fade-right">
                        <button class="first_btn">Explore</button>
                        <button class="first_btn2">Create</button>
                    </div>
                    <div class="first__numbers" data-aos="fade-right">
                        <div class="first__number">
                            <p>32k+</p>
                            Aartworks
                        </div>
                        <div class="first__number">
                            <p>20k+</p>
                            Auctions
                        </div>
                        <div class="first__number">
                            <p>12k+</p>
                            Creators
                        </div>
                    </div>
                </div>

                <div class="first__nft" data-aos="fade-up">
                    <div class="first-nft_header">
                        <div>
                            <p class="nft-header__title">Current Bid</p>
                            <p class="nft-header__numbers">0.99 ETH</p>
                        </div>

                        <div>
                            <p class="nft-header__title">Ends in</p>
                            <p class="nft-header__numbers">25 hrs</p>
                        </div>
                    </div>

                    <div class="first-nft_footer">
                        <div>
                            <p class="nft-footer__title">Artist</p>
                            <p class="nft-footer__nick">@wzard</p>
                        </div>

                        <button class="first-nft_btn">Start bid</button>

                    </div>
                </div>
            </div>

            <div class="first__numbers first__numbers--fake" data-aos="fade-right">
                <div class="first__number">
                    <p>32k+</p>
                    Aartworks
                </div>
                <div class="first__number">
                    <p>20k+</p>
                    Auctions
                </div>
                <div class="first__number">
                    <p>12k+</p>
                    Creators
                </div>
            </div>

        </div>

        <a href="#companies" class="first__arrow-btn">
            <img src="img/icons/icons.svg#arrow-down" alt="arrow">
        </a>
    </div>

    <div id="companies" class="companies" data-aos="zoom-in-down">
        <div class="container">
            <div class="companies__main">
                <img src="img/icons/icons.svg#company1" alt="company">
                <img src="img/icons/icons.svg#company2" alt="company">
                <img src="img/icons/icons.svg#company3" alt="company">
                <img src="img/icons/icons.svg#company4" alt="company">
            </div>
        </div>
    </div>

    <div class="auctions" data-aos="fade-right">
        <div class="container">
            <div class="title-wrapper">
                <h2 class="title title--pirple"><span>Live Auctions</span></h2>


            </div>
            <div class="swiper auctions-slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide auctions-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <div>03:18:24</div>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar1.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                            <button class="auctions__btn">Place a bid</button>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <div>03:18:24</div>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar1.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                            <button class="auctions__btn">Place a bid</button>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <div>03:18:24</div>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar1.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                            <button class="auctions__btn">Place a bid</button>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <div>03:18:24</div>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar1.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                            <button class="auctions__btn">Place a bid</button>
                        </div>
                    </div>
                </div>

                <div class="swiper-button-prev swiper-button-prev1">
                    <img src="img/icons/icons.svg#arrow-right" alt="arrow-right">
                </div>
                <div class="swiper-button-next swiper-button-next1">
                    <img src="img/icons/icons.svg#arrow-right" alt="arrow-right">
                </div>
            </div>

            <button class="auctions__view-all" data-aos="fade-right">View All</button>
        </div>
    </div>

    <div class="how">
        <div class="container">
            <h2 class="how__title" data-aos="fade-right">How it works</h2>
        </div>
        <div class="container">
            <div class="how__items" data-aos="zoom-in-down">
                <div class="how__item">
                    <div class="how__icon">
                        <img src="img/icons/icons.svg#how1" alt="how1">
                    </div>
                    <h4 class="how-item__title">Set up your wallet</h4>
                </div>



                <div class="how__item">
                    <div class="how__icon">
                        <img src="img/icons/icons.svg#how2" alt="how2">
                    </div>
                    <h4 class="how-item__title">Create your collection</h4>
                </div>



                <div class="how__item">
                    <div class="how__icon">
                        <img src="img/icons/icons.svg#how3" alt="how3">
                    </div>
                    <h4 class="how-item__title">Add your NFTs</h4>
                </div>


                <div class="how__item">
                    <div class="how__icon">
                        <img src="img/icons/icons.svg#how4" alt="how4">
                    </div>
                    <h4 class="how-item__title">List them for sale</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="popular">
        <div class="container">
            <div class="title-wrapper">
                <h2 class="title title--red" data-aos="fade-right"><span>Popular Collections</span></h2>
            </div>
        </div>
        <div class="popular__main">
            <div class="container">
                <div class="swiper popular-slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide auctions-slide popular-slide">
                            <div class="auctions__item">

                                <div class="auctions__img">
                                    <img src="img/auctions/4.jpg" alt="auction">

                                </div>

                                <div class="auctions__profile">
                                    <div class="auctions-profile__guy">
                                        <img src="img/auctions/avatar2.png" alt="avatar">
                                        <div>

                                            <p class="auctions-profile__nick">@wzard</p>
                                        </div>
                                    </div>

                                    <div class="auctions-profile__likes">
                                        <span>ERC-721</span>
                                    </div>
                                </div>


                            </div>
                        </div>

                        <div class="swiper-slide auctions-slide popular-slide">
                            <div class="auctions__item">

                                <div class="auctions__img">
                                    <img src="img/auctions/4.jpg" alt="auction">

                                </div>

                                <div class="auctions__profile">
                                    <div class="auctions-profile__guy">
                                        <img src="img/auctions/avatar2.png" alt="avatar">
                                        <div>

                                            <p class="auctions-profile__nick">@wzard</p>
                                        </div>
                                    </div>

                                    <div class="auctions-profile__likes">
                                        <span>ERC-721</span>
                                    </div>
                                </div>


                            </div>
                        </div>

                        <div class="swiper-slide auctions-slide popular-slide">
                            <div class="auctions__item">

                                <div class="auctions__img">
                                    <img src="img/auctions/4.jpg" alt="auction">

                                </div>

                                <div class="auctions__profile">
                                    <div class="auctions-profile__guy">
                                        <img src="img/auctions/avatar2.png" alt="avatar">
                                        <div>

                                            <p class="auctions-profile__nick">@wzard</p>
                                        </div>
                                    </div>

                                    <div class="auctions-profile__likes">
                                        <span>ERC-721</span>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="swiper-button-prev swiper-button-prev2">
                        <img src="img/icons/icons.svg#arrow-right" alt="arrow-right">
                    </div>
                    <div class="swiper-button-next swiper-button-next2">
                        <img src="img/icons/icons.svg#arrow-right" alt="arrow-right">
                    </div>
                </div>
            </div>
        </div>

        <button class="auctions__view-all" data-aos="fade-right">View All</button>

    </div>

    <div id='explore' class="categories">
        <div class="container">
            <div class="title-wrapper">
                <h2 class="title title--pirple" data-aos="fade-right"><span>Explore By Categories</span></h2>


            </div>
            <div class="swiper categories-slider">
                <div class="swiper-wrapper">

                    <div class="swiper-slide auctions-slide categories-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <button>Place a bid</button>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar3.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide categories-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <button>Place a bid</button>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar3.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide categories-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <button>Place a bid</button>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar3.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide auctions-slide">
                        <div class="auctions__item">

                            <div class="auctions__img">
                                <img src="img/auctions/1.jpg" alt="auction">
                                <button>Place a bid</button>
                            </div>

                            <div class="auctions__profile">
                                <div class="auctions-profile__guy">
                                    <img src="img/auctions/avatar3.png" alt="avatar">
                                    <div>
                                        <p class="auctions-profile__owner">Virtual Art</p>
                                        <p class="auctions-profile__nick">by @wzard</p>
                                    </div>
                                </div>

                                <div class="auctions-profile__likes">
                                    <img src="img/icons/icons.svg#heart" alt="heart icon">
                                    <span>92</span>
                                </div>
                            </div>
                            <div class="auctions__bid">
                                <p class="auctions-bid__title">Current Bid</p>
                                <p class="auctions-bid__price">4.89 ETH</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <button class="auctions__view-all" data-aos="fade-right">View All</button>
        </div>
    </div>

    <div id="creators" class="creators">
        <div class="container">
            <div class="title-wrapper">
                <h2 class="title title--red" data-aos="fade-right"><span>Top Creators</span></h2>
            </div>

            <div class="creators__main">
                <div class="creators__item" data-aos="flip-left">
                    <div class="creators__inner">
                        <img src="img/auctions/avatar1.png" alt="avatar">
                        <div>
                            <p class="creators__name">Wzard Dee</p>
                            <p class="creators__price">4.89 ETH</p>
                        </div>
                    </div>
                    <div class="creators__count">
                        <p class="creators__count-text">33</p>
                        <p class="creators__items">Items</p>
                    </div>
                </div>

                <div class="creators__item" data-aos="flip-left">
                    <div class="creators__inner">
                        <img src="img/auctions/avatar2.png" alt="avatar">
                        <div>
                            <p class="creators__name">Wzard Dee</p>
                            <p class="creators__price">4.89 ETH</p>
                        </div>
                    </div>
                    <div class="creators__count">
                        <p class="creators__count">33</p>
                        <p class="creators__items">Items</p>
                    </div>
                </div>

                <div class="creators__item" data-aos="flip-left">
                    <div class="creators__inner">
                        <img src="img/auctions/avatar3.png" alt="avatar">
                        <div>
                            <p class="creators__name">Wzard Dee</p>
                            <p class="creators__price">4.89 ETH</p>
                        </div>
                    </div>
                    <div class="creators__count">
                        <p class="creators__count">33</p>
                        <p class="creators__items">Items</p>
                    </div>
                </div>

                <div class="creators__item" data-aos="flip-left">
                    <div class="creators__inner">
                        <img src="img/auctions/avatar4.png" alt="avatar">
                        <div>
                            <p class="creators__name">Wzard Dee</p>
                            <p class="creators__price">4.89 ETH</p>
                        </div>
                    </div>
                    <div class="creators__count">
                        <p class="creators__count">33</p>
                        <p class="creators__items">Items</p>
                    </div>
                </div>


            </div>
            <button class="auctions__view-all" data-aos="fade-right">View All</button>
        </div>
    </div>

    <div id="community" class="subscribe">
        <div class="container">
            <div class="subscribe__main">
                <h2 class="subscribe__title" data-aos="fade-right">Ready for Next NFT Drop?</h2>
                <div data-aos="fade-right">
                    <input type="email" class="subscribe__input">
                    <button class="subscribe__btn">Subscribe</button>
                </div>

            </div>

        </div>
    </div>


</main>
@@include('html/footer.html', {})